<template>
	<view class="page">
		<com-notice-list :list="items"></com-notice-list>

		<template v-if="loadMoreStatus!=='loading'&&!items.length">
			<u-empty marginTop="20vh" width="240rpx" height="240rpx" text="暂时没有通知" textSize="28rpx" textColor="#86909C"
				icon="https://file.casugn.com/storecompcard/temp/空页面@2x(10)_1681113855504.png"></u-empty>
		</template>

		<template v-if="loadMoreStatus==='loading'">
			<u-loadmore height="100" fontSize="28rpx" iconSize="34rpx" :status="loadMoreStatus" @loadmore="scrolltolower" />
		</template>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				items: [],
				pageNo: 1,
				pageSize: 10,
				loadMoreStatus: 'nomore', //loading / nomore / loadmore
			}
		},
		computed: {
			...mapGetters(['openId']),
		},
		onLoad() {
			this.loadMoreStatus = 'loading'
			this.getDBData()
		},
		onPullDownRefresh() {
			this.refresherrefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.scrolltolower()
		},
		methods: {
			async getDBData(type = 'refresh') {
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					openId: this.openId,
					column: 'createTime',
					order: 'desc',
				}
				let res = await this.$api.getNewsList(params)
				if (res.success) {
					let tData = res.result.records
					if (type === 'refresh') {
						this.items = tData
					}
					if (type === 'add') {
						this.items.push(...tData)
					}
					console.log('系统消息列表：', this.items);
					this.loadMoreStatus = res.result.pages > res.result.current ? 'loadmore' : 'nomore'
				} else {
					this.loadMoreStatus = 'nomore'
				}
			},
			scrolltolower() {
				if (this.loadMoreStatus === 'nomore') {
					return
				}
				this.loadMoreStatus = 'loading';
				this.pageNo += 1
				this.getDBData('add')
			},
			refresherrefresh() {
				this.loadMoreStatus = 'loading'
				this.items = []
				this.pageNo = 1
				setTimeout(async () => {
					await this.getDBData('refresh')
				}, 500)
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F7F8FA;
	}

	.page {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>